<template>
	<view>
		<view class="banner">
			<view class="banner-list">
				<text>提购单号</text>
				<text>{{detail.purchaseNo}}</text>
			</view>
			<view class="banner-list">
				<text>提购优先级</text>
				<text>{{detail.priority}}</text>
			</view>
			<view class="banner-list">
				<text>供应商</text>
				<text>{{detail.supplier}}</text>
			</view>
			<view class="banner-list">
				<text>申请状态</text>
				<text v-if="detail.status==0">审核中</text>
				<text v-if="detail.status==1">通过</text>
				<text v-if="detail.status==2">未通过</text>
				<text v-if="detail.status==3">待接单</text>
				<text v-if="detail.status==4">采购中</text>
				<text v-if="detail.status==5">被退回</text>
			</view>
			<view class="banner-list">
				<text>申请时间</text>
				<text>{{detail.applyTime}}</text>
			</view>
		</view>
		<view>
			<view style="margin-bottom: 100rpx;" class="banner active" v-for="(item,index) in groups" :key="index">
				<checkbox-group @change="selectList(item)">
					<checkbox :checked="item.selected" />
				</checkbox-group>
				<view class="banner-top">
					<view class="top-nav" @click="information">
						<view class="top-details">
							<image mode="scaleToFill" class="details-img" src="/static/image/index/logo.png" />
							<view class="details-text">
								<text style="color: red;">{{item.materialName}}</text>
								<text>{{item.materialNo}}</text>
								<text>{{item.paramstr}}</text>
								<text style="color: #455DA3;">{{item.unit}}</text>
								<view>
									<text>采购数量:</text><text
										class="greenActive">{{item.purchaseCount}}{{item.unit}}</text>
								</view>
							</view>
						</view>
						<!-- <view class="top-nav-text" @click="showMoreAttr">查看属性</view> -->
					</view>

					<view class="top-text">
						<text>签收数量</text><input type="number" v-model="item.SignNum" class="input-sum" />
						<text class="stuta">已签收</text><text>{{item.collectNumber}}</text>
					</view>
					<!-- <view class="top-text">
		          <text>选择工序</text>
		          <input value="原材料"   class="input-sum input-active"/>
		        </view> -->
					<view class="top-text">
						<text>选择库位</text>
						<view @tap="scan(index)" class="selectLocator">{{item.defaultDataName}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="mask" v-if="attrFlag">
			    <view class="mask-content">
			      <view class="mask-title">物料属性</view>
			      <view class="mask-nav">
			        <text>发货要求</text>
			        <text>uuu</text>
			      </view>
			      <view class="mask-nav">
			        <text>包装要求</text>
			        <text>444</text>
			      </view>
			      <view class="mask-nav">
			        <text>质量要求</text>
			        <text>2222</text>
			      </view>
			        <view class="mask-nav">
			        <text>高度</text>
			        <text>2222</text>
			      </view>
			      <view class="mask-cancel" @click="cancel">取消</view>
			    </view>
			  </view> -->
		<view class="footer">
			<view class="opt">
				<checkbox-group @change="checkAll">
					<checkbox :selected="selectAllStatus" />
				</checkbox-group>
				<text style="margin: 0 12rpx;">全选</text>
			</view>
			<view class="Scan" @tap="scanList">扫库位码批量入库</view>
			<button class="submit" @click="submit">提交</button>
		</view>
		<!-- 物料信息 -->
		<view v-if='materialfalg' class="disalog-box" @touchmove.stop.prevent="moveHandle">
			<view class="disalog-content" v-for="(item,index) in groups" :key="index">
				<view class="disalog-title">
					物料信息
				</view>
				<view class="content-box">
					<view class="title-item">
						名称
					</view>
					<view class="value-item" style="color:#ff4400;">
						{{item.materialName}}
					</view>
					<view class="title-item">
						简称
					</view>
					<view class="value-item">
						{{item.materialShortName}}
					</view>
					<view class="title-item">
						编号
					</view>
					<view class="value-item">
						{{item.materialNo}}
					</view>
					<view class="sign-tag">
						{{item.unit}}
					</view>
					<view class="table-box">
						<view class="table-row th">
							<view class="table-cell">
								序号
							</view>
							<view class="table-cell">
								属性
							</view>
							<view class="table-cell">
								属性值
							</view>
						</view>
						<view class="table-row" v-for="(ite,index) in item.paramArr">
							<view class="table-cell">
								{{index + 1}}
							</view>
							<view class="table-cell">
								{{ite.unit}}
							</view>
							<view class="table-cell">
								{{ite.value}}
							</view>
						</view>
					</view>
					<view class="button" @click="close">
						关闭
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import {
		getUrlJson
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				id: '',
				detail: {},
				materialfalg: false,
				// attrFlag:false,
				groups: [],
				selectAllStatus: false,
				Warehouse: '',
				signMaterialReqs: [],
				defaultDataName: '',
				storehouseId: '',
				SignNum: '',
				submitId: '',
			}
		},

		onLoad(option) {
			console.log(option.id);
			if (option.id) {
				this.id = option.id
			}
			this.orderDetail()
			
		},
		methods: {
			// 订单详情
			async orderDetail(data) {
				let obj = {
					id: this.id
				}
				let _this = this
				let res = await api.purchaseNoDetail(obj);
				if (res.code == 0) {
					let data = res.data
					this.detail = data
					if (data.purchaseMaterialVOS && data.purchaseMaterialVOS.length > 0) {
						this.groups = data.purchaseMaterialVOS
						this.groups.forEach(item => {
							item.SignNum = ''
							item.selected = false
							item.paramArr = [];
							let str = '';
							item.param = JSON.parse(item.param);

							for (let i in item.param) {
								item.paramArr.push({
									'unit': i,
									'value': item.param[i]
								});
								console.log("item.param--->", item.paramArr)
								str = str + i + '：' + item.param[i] + '/';
							}

							str = str.substring(0, str.length - 1);
							item.paramstr = str;

						})
					}
					
					_this.defaultLocation()
				}
			},
			// 默认库位
			defaultLocation() {
				console.log(1231123)
				let groups = this.groups
				console.log('kkkkk--->', groups)
				console.log('kkkkkdd--->', this.groups)
				let obj = {
					search: "SHQ-001",
					warehouseId: '',
					status: '',
					currentPage: 1,
					pageSize: 15,
				}
				api.defaultNews(obj).then(res => {
					if (res.code == 0) {
						groups.forEach(item => {
							item.defaultDataName = res.data.result[0].storehouseNo
							console.log('kkkkoooook--->', item.defaultDataName)
							item.storehouseId = res.data.result[0].id
						})
						this.groups = groups
						console.log('0000===>', this.groups)
						this.$forceUpdate()
						// this.storehouseId = res.data.result[0].id
					}
				})
			},
			// 批量扫码
			scanList() {
				const goods = this.groups.filter(item => {
					return item.selected === true
				})
				if (goods.length < 1) {
					uni.showToast({
						title: '请勾选物料',
						icon: 'none',
						duration: 2000
					});
					return
				}
				let _this = this
				uni.scanCode({
					success: function(res) {
						let data = getUrlJson(res.result);
						console.log(getUrlJson(res.result));
						if (data.t == 'STOREHOUSE') {
							api.selectedLibrary(data.id).then(res => {
								if (res.code == 0) {
									goods.forEach(item => {
										item.defaultDataName = res.data.storehouseNo
										item.storehouseId = res.data.id
									})
									_this.$forceUpdate()
									console.log('goods--->', goods)

								}
							})
						} else {
							uni.showToast({
								title: '暂不支持该类型二维码',
								icon: 'none',
								duration: 2000
							});
						}
					}
				});


			},
			// 扫码
			scan(index) {
				let _this = this
				let groups = this.groups
				uni.scanCode({
					success: function(res) {
						console.log('条码内容：' + res.result);
						let data = getUrlJson(res.result);
						console.log(getUrlJson(res.result));
						if (data.t == 'STOREHOUSE') {
							api.selectedLibrary(data.id).then(res => {
								if (res.code == 0) {
									_this.$set(groups[index], 'defaultDataName', res.data.storehouseNo)
									_this.$set(groups[index], 'storehouseId', res.data.id)
									console.log('ddddddddppppp', groups[index].defaultDataName)
									_this.groups = groups;
									_this.$forceUpdate()
									console.log(123123, _this.groups)
								}
							})
						} else {
							uni.showToast({
								title: '暂不支持该类型二维码',
								icon: 'none',
								duration: 2000
							});
						}
					}
				});

			},
			// 物料信息
			information() {
				this.materialfalg = true
			},
			close() {
				this.materialfalg = false
			},
			// 弹框
			// showMoreAttr(){
			//     this.attrFlag=true
			// },
			// cancel(){
			//      this.attrFlag=false
			// },

			// 单个商品的选择
			selectList(item) {
				let _this = this
				console.log('item-->', item)
				item.selected = !item.selected
				if (!item.selected) {
					_this.selectAllStatus = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const goods = _this.groups.every(item => {
						return item.selected === true
						_this.selectAllStatus = true
					})
					if (goods) {
						_this.selectAllStatus = true
					} else {
						_this.selectAllStatus = false
					}
				}
			},

			checkAll() {
				this.selectAllStatus = !this.selectAllStatus
				if (this.selectAllStatus) {
					this.groups.map(item => {
						item.selected = true
					})
				} else {
					this.groups.map(item => {
						item.selected = false
					})
				}
			},

			// 提交
			submit() {
				let flag = true
				this.signMaterialReqs = []
				let dataArr = this.groups.filter(item => {
					return item.selected == true
				})
				if (dataArr.length < 1) {
					uni.showToast({
						title: '请勾选物料',
						duration: 2000
					});
					return
				}
				dataArr.some(item => {
					this.signMaterialReqs.push({
						// processId:,
						actualReceiveCount: item.SignNum,
						// processNo:,
						purchaseMaterialId: item.id,
						storehouseId: item.storehouseId,
						twoNumber: '',
					})
					console.log('item-->>', item)
					if (!item.SignNum) {
						console.log(1231212)
						flag = false
						return true
					}
				})
				
				if(!flag){
					uni.showToast({
						title: '请填写签收数量',
						icon:'none',
						duration: 2000
					});
					return
				}
				
				let obj = {
					id: this.id,
					signMaterialReqs: this.signMaterialReqs,
				}
				api.noSingleSubmit(obj).then(res => {
					if (res.code == 0) {
						this.submitId = res.data.id;
						uni.showToast({
							title: '签收成功',
							duration: 2000
						});
					}
				})

				// uni.navigateTo({
				// 	url: "/subcontractList/storage/purchaseNo/selectBatch?id="+this.submitId
				// })
			},

		}
	}
</script>
<style>
	.selectLocator {
		margin-left: 23rpx;
		width: 72%;
		padding-left: 20rpx;
		height: 59rpx;
		display: flex;
		align-items: center;
		border: 2rpx #ccc solid;
		border-radius: 5rpx;
	}

	.title {
		width: 95%;
		height: 60rpx;
		background: white;
		margin: 10rpx auto;
	}

	.title-text {
		font-size: 28rpx;
		border-left: 8rpx solid #53ab8b;
		padding-left: 10rpx;
	}

	.banner {
		color: white;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background: #455da3;
		border-radius: 15rpx;
		padding: 20rpx 20rpx;
		box-shadow: 0 0 3rpx 3rpx rgb(221, 215, 215);
	}

	.active {
		width: 88%;
		background: white;
		display: flex;
		align-items: center;
		padding: 40rpx 20rpx;
	}

	.banner-list {
		font-size: 28rpx;
		display: flex;
		border-bottom: #9999 solid 2rpx;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
	}

	.green {
		background: #53ab8b
	}

	.top-text {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
		display: flex;
		align-items: center;
		line-height: 40rpx;
	}

	.banner-top {
		display: flex;
		flex-direction: column;
		width: 85%;
	}

	.top-nav {
		display: flex;
		justify-content: space-between;

	}

	.top-details {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.details-text {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		font-size: 24rpx;
		color: #333;
		line-height: 40rpx;
	}

	.details-img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.top-nav-text {
		margin-left: 60rpx;
		font-size: 24rpx;
		color: #333;
	}

	.mask {
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4)
	}

	.mask-content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
	}

	.mask-title {
		font-size: 32rpx;
		color: #333;
		text-align: center;
		margin: 20rpx 0;
	}

	.mask-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 48rpx;
		font-size: 28rpx;
		padding: 0 28rpx;
		color: #999;
	}

	.mask-cancel {
		height: 80rpx;
		font-size: 28rpx;
		color: red;
		box-shadow: 0 -4rpx 8rpx #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.mask-cancel:active {
		background: rgba(0, 0, 0, 0.1)
	}

	.input-sum {
		border: 2rpx solid #ccc;
		height: 45rpx;
		width: 100rpx;
		margin-left: 20rpx;
		font-size: 24rpx;
		padding-left: 20rpx;
		z-index: 0;
	}

	.greenActive {
		color: #53ab8b;
		margin-left: 20rpx;
	}

	.input-active {
		width: 300rpx;
	}

	.stuta {
		margin: 0 20rpx;
		width: 100rpx;
		height: 50rpx;
		background: #53ab8b;
		border-radius: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.footer {
		width: 100%;
		height: 100rpx;
		background: white;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
	}

	.opt {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.Scan {
		width: 250rpx;
		height: 70rpx;
		color: white;
		background: #455da3;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		border-radius: 10rpx;
	}

	.submit {
		width: 150rpx;
		height: 70rpx;
		color: white;
		background: #455da3;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
</style>
<style lang="scss" scoped>
	.disalog-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);

		.disalog-content {
			background-color: white;
			border-radius: 10rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			animation-name: disalogshow;
			animation-duration: 1s;
			width: calc(100% - 20rpx);
			transform: translate(-50%, -50%);
			box-sizing: border-box;
			padding: 20rpx;

			.disalog-title {
				text-align: center;
			}

			.content-box {
				font-size: 28rpx;
				line-height: 50rpx;

				.title-item {
					font-weight: bold;
				}

				.value-item {
					color: #6a5acd;
					padding-left: 40rpx;
				}

				.sign-tag {
					background-color: #eaeaea;
					border-radius: 10rpx;
					line-height: 70rpx;
					color: #6a5acd;
					padding: 0 40rpx;
				}

				.table-box {
					display: table;
					width: 100%;
					border-radius: 10rpx 10rpx 0 0;
					margin: 20rpx 0;
					overflow: hidden;

					.table-row {
						display: table-row;
					}

					.table-cell {
						text-align: center;
						display: table-cell;
						background-color: #d0f0fd;
					}

					.th {


						.table-cell {
							background-color: #1793c6;
							color: white;
						}
					}
				}

				.button {
					background-color: #35af86;
					color: white;
					line-height: 70rpx;
					text-align: center;
					border-radius: 10rpx;
					margin-top: 60rpx;
				}
			}
		}

	}

	@keyframes disalogshow {
		0% {
			transform: translate(-50%, -60%);
			// transform: scale(0);
			opacity: 0;
		}

		100% {
			transform: translate(-50%, -50%);
			// transform: scale(1);
			opacity: 1;
		}
	}
</style>
